<template>
  <div class="editTableMain">
    <div class="listBox">
      <el-table :data="data" border>
        <el-table-column v-for="item in columns" :key="item.label" :prop="item.label" :label="item.label" align="center">
          <template slot-scope="scope">
            <el-input size="small" v-model="data[scope.$index][item.label]" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btnGroup flex align-center">
      <el-button size="mini" type="primary" icon="el-icon-check" @click="$message({ message: '提交成功', type: 'success'})">提交</el-button>
      <el-button size="mini" icon="el-icon-refresh-left">撤销</el-button>
      <el-button size="mini" icon="el-icon-plus" @click="addRows">增加行</el-button>
      <el-button size="mini" icon="el-icon-delete">删除行</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "EditTable",
  data() {
    return {
      data: [
        {
          user_id: 1,
          dept_id: 103,
          user_name: "admin",
          nick_name: "管理员",
          user_type: "00",
          email: "ry@163.com",
          phonenumber: 15888888888,
          sex: 1,
        },
        {
          user_id: 1,
          dept_id: 105,
          user_name: "ry1",
          nick_name: "用户9",
          user_type: "00",
          email: "ry@qq.com",
          phonenumber: 1566666666,
          sex: 1,
        }
      ],
      columns: [{
        label: "user_id"
      }, {
        label: "dept_id"
      }, {
        label: "user_name"
      }, {
        label: "nick_name"
      }, {
        label: "user_type"
      }, {
        label: "email"
      }, {
        label: "phonenumber"
      }, {
        label: "sex"
      }, {
        label: "avatar"
      }, {
        label: "password"
      }],
    }
  },
  methods: {
    addRows() {
      this.data.push({});
    }
  }
}
</script>
<style lang="scss" scoped>
.editTableMain{
  height: 100%;
  .listBox{
    height: calc(100% - 40px);
  }
  .btnGroup{
    height: 40px;
    background: #f1f1f1;
    padding: 0 10px;
  }
}
::v-deep .el-table .el-table__cell{
  padding: 4px 0;
}
</style>
